<template>
  <li v-bind:class="['tab-label', {'active':isActive,'modified':tab.flags.modified}]" v-bind:id="`tab_label_${tab.id}`" data-droppable="TABLABEL" draggable="true"
    @click="handleClick" @dragstart="handleDragStart" @contextmenu="handleContentMenu">
    <div v-if="isDraggedOver" class="tab-label-insert-pos"></div>
    <div v-if="tab.icon" v-bind:class="tab.icon"></div>
    <div class="title">{{tab.title}}</div>
    <div class='control'>
      <i class='close' @click.stop="handleCloseClick">×</i>
      <i class='dot'></i>
    </div>
  </li>
</template>

<script>
  import { mapMutations } from 'vuex'

  export default {
    name: 'App',
    props: {
      tabId: { type: String},
    },
    computed: {
      tab: function () {
        let tab = this.$store.state.tab.tabs[this.tabId]
        if(!tab){
          tab = { flags:{} }
        }
        return tab
      },
      isActive: function () {
        if (this.$store.state.tab.tabGroups[this.tab.tabGroupId]) {
          return this.$store.state.tab.tabGroups[this.tab.tabGroupId].activeTabId === this.tabId
        }else {
          return false
        }
      },
      isDraggedOver: function () {
        return false
        // state.DragAndDrop.meta ? state.DragAndDrop.meta.tabLabelTargetId === `tab_label_${tabId}` : false
      }
    },
    methods: {
      ...mapMutations('tab', {
        activateTab: 'tabActivate',
        openContextMenu: 'contextMenuOpen',
        removeTab: 'tabRemove'
      }),
      handleClick: function () {
        this.activateTab(this.tabId)
      },
      handleCloseClick: function () {
        this.removeTab(this.tabId)
      },
      handleDragStart: function () {
        console.log('tab-bar-label.handleDragStart')
      },
      handleContentMenu: function (e) {
        e.stopPropagation()
        e.preventDefault()
        let pos = { x: e.clientX, y: e.clientY }
        this.openContextMenu([pos, this.tab])
      }
    }
  }

</script>
